<template>
	<div class="notice_box">
        <p class="close" @click="close"><u-icon name="close" color="#999999" size="20"></u-icon></p>
        
        <div class="tx_msg">
            <img :src="obj.bAvatar?obj.bAvatar:'/static/mr_tx.png'" alt="">
            <div>
                <p class="name">昵称：{{obj.memberUserName}}</p>
                <p class="text">{{obj.groupName}}</p>
            </div>
        </div>
        <p class="time">加入时间：{{obj.createTime}}</p>
        <p class="icon">
            <img src="/static/jb.png" alt="">
            被举报次数：{{obj.exposure}}次
        </p>
        <div class="anniu_box">
            <p @click="toUser">私信</p>
            <p @click="close(false)">取消</p>
        </div>
    </div>
</template>

<script>
	export default {
        options: {
            styleIsolation: 'shared'
        },
        props: {
			msg: {
				type: String,
			},
            isRefresh3: {
				type: Number,
				default: 0
			}
		},
        watch:{
            isRefresh3:{
                handler(n,o){
                    console.log("刷新了");
                    this.obj = JSON.parse(this.msg)
                    console.log(this.obj)
                }
            }
        },
		data() {
			return {
                obj:{}

			}
		},
		methods: {

            toUser(){
                let setData = JSON.stringify({
					memberUserId:this.obj.memberUserId,
					id:this.obj.id,
					bAvatar:this.obj.avatar,
					memberUserName:this.obj.memberUserName
				})
                uni.navigateTo({
                    url: `/pages/chat/index?setData=${setData}`
                });
                this.$emit('close',false)
            },
			
            close(state){
                this.$emit('close',state)
            }
		},
        mounted(){
            console.log('111')
        },
        onLoad() {
		},
		onShow(){
            console.log('222')
        }
	}
</script>

<style lang="scss" scoped>
    @mixin content-flex($pitch) {
		display: flex;
		align-items: center;
		justify-content:  $pitch;
	}
	.notice_box{
        width: 580rpx;
        border-radius: 20rpx;
        padding:0 30rpx 30rpx 30rpx;
        background: linear-gradient(180deg, #D3F6D9 0%, #FFFFFF 50%);
        .close{
            display: flex;
            justify-content: flex-end;
            padding-top:24rpx;
        }
        .tx_msg{
            display: flex;
            margin-top:26rpx;
            img{
                width: 104rpx;
                height: 104rpx;
                border-radius: 50%;
                margin-right:32rpx;
            }
            div{
                display: flex;
                flex-direction:column;
                justify-content: space-around;
                .name{
                    font-size:32rpx;
                }
                .text{
                    font-size:28rpx;
                    color:#999999;
                }
            }
        }
        .time{
            font-size:28rpx;
            margin:30rpx 0 22rpx 0;
            color:#999999;
        }
        .icon{
            display: flex;
            color:#FF4441;
            font-size:30rpx;
            img{
                width: 28rpx;
                height: 34rpx;
                margin-right:12rpx;
            }
        }
        .anniu_box{
            display: flex;
            justify-content: space-between;
            margin-top:30rpx;
            p{
                width: 47%;
                height: 48px;
                line-height: 48px;
                border-radius: 50px;
                background: #08961F;
                text-align: center;
                font-size: 32rpx;
                font-weight: 500;
                color:#fff;
                border:1px solid transparent;
                &:last-child{
                    border-color: #08961F;
                    color:#08961F;
                    background: none;
                }
            }
        }
    }
</style>
